<template>
  <div class="modify-dialog">
    <slot></slot>
    <el-dialog v-bind="dialogOpts" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
        <el-tab-pane label="安装列表" name="1">
          <el-table :data="azData" style="width: 100%" border
                    max-height="300px"
                    :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                    :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
            <el-table-column label="序号" type="index" width="200"></el-table-column>
            <el-table-column prop="installers" label="安装人员"/>
            <el-table-column prop="commissionFee" label="提成总额"/>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isCancelCommission==0" style="color: #66b1ff">正常</span>
                <span v-if="scope.row.isCancelCommission==1" style="color: #e57373">已取消</span>
              </template>
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-link style="color: #66b1ff;text-decoration: none" @click="openMistake(scope.row)">操作失误</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="拣货列表" name="2">
          <el-table :data="azData" border
                    max-height="300px"
                    :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                    :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
            <el-table-column label="序号" type="index" width="200"></el-table-column>
            <el-table-column prop="installers" label="拣货人员"/>
            <el-table-column prop="commissionFee" label="提成总额"/>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isCancelCommission==0" style="color: #66b1ff">正常</span>
                <span v-if="scope.row.isCancelCommission==1" style="color: #e57373">已取消</span>
              </template>
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-link style="color: #66b1ff;text-decoration: none" @click="openMistake(scope.row)">操作失误</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="装车列表" name="3">
          <el-table :data="azData" border
                    max-height="300px"
                    :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                    :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
            <el-table-column label="序号" type="index" width="200"></el-table-column>
            <el-table-column prop="installers" label="装车人员"/>
            <el-table-column prop="commissionFee" label="提成总额"/>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isCancelCommission==0" style="color: #66b1ff">正常</span>
                <span v-if="scope.row.isCancelCommission==1" style="color: #e57373">已取消</span>
              </template>
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-link style="color: #66b1ff;text-decoration: none" @click="openMistake(scope.row)">操作失误</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="卸货列表" name="4">
          <el-table :data="azData" border
                    max-height="300px"
                    :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                    :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
            <el-table-column label="序号" type="index" width="200"></el-table-column>
            <el-table-column prop="installers" label="卸货人员"/>
            <el-table-column prop="commissionFee" label="提成总额"/>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isCancelCommission==0" style="color: #66b1ff">正常</span>
                <span v-if="scope.row.isCancelCommission==1" style="color: #e57373">已取消</span>
              </template>
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-link style="color: #66b1ff;text-decoration: none" @click="openMistake(scope.row)">操作失误</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="售后列表" name="5">
          <el-button type="primary" style="float: right;margin-bottom: 5px" @click="addAfterSale">新增售后人员</el-button>

          <el-table :data="azData" border
                    max-height="300px"
                    :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                    :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
            <el-table-column label="序号" type="index" width="200"></el-table-column>
            <el-table-column prop="installers" label="售后人员"/>
            <el-table-column prop="commissionFee" label="提成总额"/>
            <el-table-column prop="afterSaleRemark" label="备注"/>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.isCancelCommission==0" style="color: #66b1ff">正常</span>
                <span v-if="scope.row.isCancelCommission==1" style="color: #e57373">已取消</span>
              </template>
            </el-table-column>
            <el-table-column width="200">
              <template slot-scope="scope">
                <el-link style="color: #66b1ff;text-decoration: none" @click="openMistake(scope.row)">操作失误</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="mistakeDialog" width="30%" center>
      <div>请填写失误原因：</div>
      <el-input v-model="cancelReason" type="textarea" style="width: 400px"></el-input>
      <span slot="footer">
        <el-button @click="mistakeDialog=false">取 消</el-button>
        <el-button type="primary" @click="comfirmReason">确 认</el-button>
      </span>
    </el-dialog>
    <el-dialog append-to-body :visible.sync="addAfterSaleDialog" width="30%" center>
      <div>选择人员：
        <el-select v-model="sh" multiple filterable>
          <el-option
              v-for="(item, i) in list"
              :label="item.userName"
              :value="item.userName"
              :key="i">
          </el-option>
        </el-select>
      </div>

      <div style="margin-top: 20px">售后原因：
        <el-input type="textarea" style="width: 300px" placeholder="请输入售后原因" v-model="afterSaleRemark"></el-input>
      </div>

      <span slot="footer">
        <el-button @click="addAfterSaleDialog=false">取 消</el-button>
        <el-button type="primary" @click="comfirmAfterSale">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import modifyMixins from "@/mixins/modifyMixins.vue";
import tableMixins from "@/mixins/tableMixins.vue";
import Decimal from "decimal.js";

export default {
  name: "InstallList",
  mixins: [tableMixins, modifyMixins],
  data() {
    return {
      // apiName: "newInstallList",
      apiName: 'orderInstallers',
      dialogWidth: "20vm",
      activeName: '1',
      mistakeDialog: false,
      azData: [],
      shData: [],
      list: [],
      cancelReason: "",
      afterSaleRemark: "",
      sh: [],
      orderId: "",
      addAfterSaleDialog: false
    };
  },
  computed: {
    title() {
      return "操作列表";
    },
  },
  mounted() {
  },
  methods: {
    comfirmAfterSale() {
      const data = this.sh.map(el => ({
        installers: el,
        type: 5,
        orderId: this.orderId,
        areaId: this.row.area,
        afterSaleRemark: this.afterSaleRemark
      }))
      this.$api.orderAddInstaller(data).then(res => {
            if (res == 1) {
              this.$message.success("添加成功！")
            }
          }
      )
      setTimeout(() => {
        this.$api.orderInstallers({type: 5, orderId: this.orderId, pageSize: 100000, pageNumber: 1}).then(res => {
          this.azData = res.data
        })
      }, 2000)
      this.addAfterSaleDialog = false
    },
    showDialog(modify = "add", row = {}) {
      this.dialogVisible = true;
      this.row = row;
      this.activeName = '1'
      this.orderId = row.id
      this.$api.orderInstallers({type: this.activeName, orderId: row.id, pageSize: 100000, pageNumber: 1}).then(res => {
        this.azData = res.data
      })
    },
    addAfterSale() {
      this.sh = []
      this.addAfterSaleDialog = true
      this.$api.orderSelectInstallationUser({loginType: 4})
          .then(res => {
            this.list = res
          })
    },
    // formatQuery(opts) {
    // 	const { date = [], ...params } = opts;
    // 	if (date && date[0] && date[1]) {
    // 		params.startTime = dayjs(date[0]).format("YYYY-MM-DD HH:mm:ss");
    // 		params.endTime = dayjs(date[1]).format("YYYY-MM-DD HH:mm:ss");
    // 	}
    // 	params.orderId = this.row.id;
    // 	return params;
    // },
    handleClick(tab, event) {
      const number = parseInt(tab.index) + 1
      this.$api.orderInstallers({type: number, orderId: this.row.id, pageSize: 100000, pageNumber: 1}).then(res => {
        this.azData = res.data
      })
    },
    openMistake(row) {
      this.mistakeId = row.id
      this.mistakeDialog = true
      this.cancelReason = ""
    },
    comfirmReason() {
      const data = {
        id: this.mistakeId,
        cancelReason: this.cancelReason
      }
      this.$api.orderCancelCommission(data).then(res => {
        if (res == 1) {
          this.mistakeDialog = false
          this.$message.success("操作成功！")
          this.$api.orderInstallers({
            type: this.activeName,
            orderId: this.row.id,
            pageSize: 100000,
            pageNumber: 1
          }).then(res => {
            this.azData = res.data
          })
        }
      })
    }
  },
}
;
</script>

<style lang="less" scoped>
:deep(.el-table__expanded-cell) {
  padding: 0;
}
</style>

